<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>漫画 page</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/cartoon.css">
    <link rel="stylesheet" href="./css/header.css">
    <link rel="stylesheet" href="./css/footer.css">
</head>
<body>
    <!-- 漫画头部 start -->
    <div class="header">
        <div class="header_content wrapper clearfix">
            <!-- 左边  -->
            <ul class="head_left f_left clearfix">
                <li class="f_left">
                    <a href="https://manga.bilibili.com/">
                        <img src="./素材/头部/logo.png" alt="logo">
                        <span>哔哩哔哩漫画</span>
                    </a>
                </li>
                <li class="f_left">
                    <a href="https://www.bilibili.com/">
                        <img src="./素材/头部/video.png" alt="主站">
                        <span>主站</span>
                    </a>
                </li>
                <li class="f_left">
                    <a href="https://www.bilibili.com/">首页</a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/classify">分类</a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/updates">更新</a>
                </li>
            </ul>
            <!-- 右边 -->
            <ul class="head_right f_right clearfix">
                <li class="f_left">
                    <input type="text" placeholder="偷星九月天..">
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/app-download">下载APP</a>
                </li>
                <li class="f_left">
                    <div> 
                        <span>登录</span>
                        <span>|</span>
                    </div>
                    <!-- 点击“登录”显示被隐藏的登录面板 -->
                    <div class="login">
                        <div class="login_box">
                            <!-- 上部分 -->
                            <div class="lg_top clearfix">
                                <div class="f_left">扫描二维码登录</div>                              
                                <div class="f_left">
                                    <span class="mima">密码登录</span>
                                    <span class="line"></span>
                                    <span class="duanxin">短信登录</span>
                                </div>
                            </div>
                            <!-- 中间部分 -->
                            <div class="lg_center clearfix">
                                <div class="f_left">
                                    <img src="./素材/头部/login-code.png" alt="erweima">
                                    <p>请使用
                                        <a href="http://app.bilibili.com/">哔哩哔哩客户端</a> </p>
                                    <p>扫码登录或扫码下载APP</p>
                                </div>
                                <div class="f_left">
                                    <input type="text" placeholder="请输入你的账号..">
                                    <input type="text" placeholder="请输入你的密码..">
                                    <div class="btns">
                                        <button class="f_left">注册</button>
                                        <button class="f_right">登录</button>
                                    </div>
                                    <p class="others_way">其他登录方式</p>
                                    <ul class="clearfix">
                                        <li class="f_left">
                                            <a href="https://open.weixin.qq.com/connect/qrconnect?appid=wxafc256bf83583323&redirect_uri=https%3A%2F%2Fpassport.bilibili.com%2Flogin%2Fsnsback%3Fsns%3Dwechat%26state%3De6e6b9f050c611ec8572a66eb6ff97a9%26source%3Dnew_main_mini&response_type=code&scope=snsapi_login&state=authorize#wechat_redirect">
                                                <img src="./素材/头部/weixin.png" alt="weixin">
                                                <span>微信登录</span>
                                            </a>                                          
                                        </li>
                                        <li class="f_left">
                                            <a href="https://api.weibo.com/oauth2/authorize?client_id=2841902482&redirect_uri=https%3A%2F%2Fpassport.bilibili.com%2Flogin%2Fsnsback%3Fsns%3Dweibo%26state%3De6e6b9f050c611ec8572a66eb6ff97a9%26source%3Dnew_main_mini&scope=email###">
                                                <img src="./素材/头部/weibo.png" alt="weibo">
                                                <span>微博登录</span>
                                            </a>
                                        </li>
                                        <li class="f_left">
                                            <a href="https://graph.qq.com/oauth2.0/show?which=Login&display=pc&response_type=code&state=authorize&client_id=101135748&redirect_uri=https%3A%2F%2Fpassport.bilibili.com%2Flogin%2Fsnsback%3Fsns%3Dqq%26state%3De6e6b9f050c611ec8572a66eb6ff97a9%26source%3Dnew_main_mini&scope=do_like,get_user_info,get_simple_userinfo,get_vip_info,get_vip_rich_info,add_one_blog,list_album,upload_pic,add_album,list_photo,get_info,add_t,del_t,add_pic_t,get_repost_list,get_other_info,get_fanslist,get_idollist,add_idol,del_idol,get_tenpay_addr">
                                                <img src="./素材/头部/qq.png" alt="qq">
                                                <span>QQ登录</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>     
                            </div>
                            <!-- 下部分 -->
                            <div class="lg_bottom">
                                <p>未注册过哔哩哔哩的手机号，我们将自动帮你注册账号</p>
                                <p>登录或完成注册即代表你同意 用户协议 和 隐私政策</p>
                            </div>
                        </div>
                    </div>
                   
                </li>
                <li class="f_left">
                    <a href="https://passport.bilibili.com/register/phone.html">注册</a>
                </li>
                <li class="f_left">
                    <a href=""></a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 漫画头部 end -->
    <!-- 轮播图区域 start -->
    <div class="banner " >
        <div class="banner_content wrapper">
            <ul>
                <li>
                    <a href="https://manga.bilibili.com/mc29101/526038?from=manga_homepage_banner">
                        <img src="./素材/头部/1.jpg" alt="">
                    </a> 
                </li>
            </ul>
        </div>
    </div>
    <!-- 轮播图区域 end -->
    <!-- 主导航栏 start -->
    <div class="nav"> 
        <ul class="nav_content wrapper clearfix">
            <li class="f_left">
                <a href="https://manga.bilibili.com/classify#/?from=manga_homepage&styles=1034&areas=-1&status=-1&prices=-1&orders=0">竞技</a>
            </li>
            <li class="f_left">
                <a href="https://manga.bilibili.com/classify#/?from=manga_homepage&styles=1013&areas=-1&status=-1&prices=-1&orders=0">冒险</a>
            </li>
            <li class="f_left">
                <a href="https://manga.bilibili.com/classify#/?from=manga_homepage&styles=999&areas=-1&status=-1&prices=-1&orders=0">热血</a>
            </li>
            <li class="f_left">
                <a href="https://manga.bilibili.com/classify#/?from=manga_homepage&styles=994&areas=-1&status=-1&prices=-1&orders=0">搞笑</a>
            </li>
            <li class="f_left">
                <a href="https://manga.bilibili.com/classify#/?from=manga_homepage&styles=995&areas=-1&status=-1&prices=-1&orders=0">恋爱</a>
            </li>
            <li class="f_left">
                <a href="https://manga.bilibili.com/classify#/?from=manga_homepage&styles=1026&areas=-1&status=-1&prices=-1&orders=0">少女</a>
            </li>
            <li class="f_left">
                <a href="https://manga.bilibili.com/classify#/?from=manga_homepage&styles=1026&areas=-1&status=-1&prices=-1&orders=0">日常</a>
            </li>
            <li class="f_left">
                <a href="https://manga.bilibili.com/classify#/?from=manga_homepage&styles=1001&areas=-1&status=-1&prices=-1&orders=0">校园</a>
            </li>
            <li class="f_left">
                <a href="https://manga.bilibili.com/classify#/?from=manga_homepage&styles=1007&areas=-1&status=-1&prices=-1&orders=0">治愈</a>
            </li>
            <li class="f_left">
                <a href="https://manga.bilibili.com/classify#/?from=manga_homepage&styles=997&areas=-1&status=-1&prices=-1&orders=0">古风</a>
            </li>
            <li class="f_left">
                <a href="https://manga.bilibili.com/classify#/?from=manga_homepage&styles=1016&areas=-1&status=-1&prices=-1&orders=0">玄幻</a>
            </li>
            <li class="f_left">
                <a href="https://manga.bilibili.com/classify#/?from=manga_homepage&styles=998&areas=-1&status=-1&prices=-1&orders=0">奇幻</a>
            </li>
            <li class="f_left">
                <a href="https://manga.bilibili.com/classify#/?from=manga_homepage&styles=996&areas=-1&status=-1&prices=-1&orders=0">惊奇</a>
            </li>
            <li class="f_left">
                <a href="https://manga.bilibili.com/classify#/?from=manga_homepage&styles=1023&areas=-1&status=-1&prices=-1&orders=0">悬疑</a>
            </li>
            <li class="f_left">
                <a href="https://manga.bilibili.com/classify#/?from=manga_homepage&styles=-1&areas=-1&status=-1&prices=-1&orders=0">全部 ></a>
            </li>
        </ul>  
    </div>
    <!-- 主导航栏 end -->
    <!-- 为你推荐区域 start -->
    <div class="cartoon">
        <div class="cartoon_content wrapper">   
            <div class="cartoon_title clearfix">
                <h2 class="f_left">为你推荐</h2>
                <button class="f_right">换一换</button>
            </div>
            <ul class="clearfix" >
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc28678">
                        <img src="./素材/为你推荐/1.jpg" alt="">
                        <p>绝弑狂尊</p>
                        <p>都市</p>
                    </a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc27593">
                        <img src="./素材/为你推荐/2.jpg" alt="">
                        <p>全职高手</p>
                        <p>竞技</p>
                    </a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc28521">
                        <img src="./素材/为你推荐/3.jpg" alt="">
                        <p>整个修真界的妹子都想抓我</p>
                        <p>玄幻</p>
                    </a>  
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc29126">
                        <img src="./素材/为你推荐/4.jpg" alt="">
                        <p>我家娘子竟然是女帝？</p>
                        <p>玄幻</p>
                    </a>       
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc28155">
                        <img src="./素材/为你推荐/5.jpg" alt="">
                        <p>神级外卖小哥</p>
                        <p>奇幻</p>
                    </a>       
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc27817">
                        <img src="./素材/为你推荐/6.jpg" alt="">
                        <p>百炼成神</p>
                        <p>玄幻</p>
                    </a>       
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc27661">
                        <img src="./素材/为你推荐/7.jpg" alt="">
                        <p>仙王的日常生活</p>
                        <p>搞笑</p>
                    </a>                
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc27809">
                        <img src="./素材/为你推荐/8.png" alt="">
                        <p>快把我哥带走</p>
                        <p>搞笑</p>
                    </a>               
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc27591">
                        <img src="./素材/为你推荐/9.png" alt="">
                        <p>凡人修仙传</p>
                        <p>玄幻</p>
                    </a>               
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc28953">
                        <img src="./素材/为你推荐/10.jpg" alt="">
                        <p>世界最强暗杀者转生成异世界贵族</p>
                        <p>冒险</p>
                    </a>                
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc25816">
                        <img src="./素材/为你推荐/11.jpg" alt="">
                        <p>战国千年</p>
                        <p>热血</p>
                    </a>               
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc27949">
                        <img src="./素材/为你推荐/12.jpg" alt="">
                        <p>似锦</p>
                        <p>恋爱</p>
                    </a>               
                </li>
            </ul>
        </div>
    </div>
    <!-- 为你推荐区域 end -->
    <!-- 热门速递区域 start -->
    <div class="cartoon2">
        <div class="cartoon2_content wrapper">
            <ol class="cartoon2_title clearfix">
                <li class="f_left">
                     <h2>热门速递</h2>
                </li>
                <li class="f_left">二次元养老院</li>
                <li class="f_left">9.0分以上佳作</li>
                <li class="f_right">
                    <button>换一换</button>
                </li>
            </ol>   
            <ul class="clearfix">
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc27634">
                        <img src="./素材/热门速递/1.jpg" alt="">
                        <p>假面骑士SPIRITS</p>
                        <p>热血</p>
                    </a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc25756">
                        <img src="./素材/热门速递/2.jpg" alt="">
                        <p>五等分的新娘</p>
                        <p>恋爱</p>
                    </a>                   
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc26434">
                        <img src="./素材/热门速递/3.png" alt="">
                        <p>机动奥特曼</p>
                        <p>科幻</p>
                    </a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc24733">
                        <img src="./素材/热门速递/4.png" alt="">
                        <p>火影忍者</p>
                        <p>热血</p>
                    </a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc25469">
                        <img src="./素材/热门速递/5.png" alt="">
                        <p>精灵宝可梦</p>
                        <p>冒险</p>
                    </a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc29589">
                        <img src="./素材/热门速递/6.jpg" alt="">
                        <p>我的妹妹不可能那么可爱</p>
                        <p>日常</p>
                    </a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc25448">
                        <img src="./素材/热门速递/7.png" alt="">
                        <p>游戏王</p>
                        <p>奇幻</p>
                    </a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc25125">
                        <img src="./素材/热门速递/8.png" alt="">
                        <p>滑头鬼之孙</p>
                        <p>热血</p>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 热门速递区域 end -->
    <!-- 搞笑爆漫区域 start -->
    <div class="cartoon3">
        <div class="cartoon3_content wrapper">   
            <div class="cartoon3_title clearfix">
                <h2 class="f_left">搞笑爆漫</h2>
                <button class="f_right">更多</button>
            </div>
            <ul class="clearfix">
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc25506">
                        <img src="./素材/搞笑爆漫/1.jpg" alt="">
                        <p>我家大师兄脑子有坑</p>
                        <p>更新至 第448坑</p>
                    </a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc25288">
                        <img src="./素材/搞笑爆漫/2.jpg" alt="">
                        <p>女子学院的男生</p>
                        <p>[完结] 共 492 话</p>
                    </a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc24442">
                        <img src="./素材/搞笑爆漫/3.jpg" alt="">
                        <p>非人哉</p>
                        <p>更新至 746 话</p>
                    </a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc27661">
                        <img src="./素材/搞笑爆漫/4.jpg" alt="">
                        <p>仙王的日常生活</p>
                        <p>更新至 154 话</p>
                    </a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc25541">
                        <img src="./素材/搞笑爆漫/5.jpg" alt="">
                        <p>修真聊天群</p>
                        <p>更新至 425 话</p>
                    </a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc27809">
                        <img src="./素材/搞笑爆漫/6.png" alt="">
                        <p>快把我哥带走</p>
                        <p>更新至 297 话</p>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 搞笑爆漫区域 end -->
    <!-- 冒险传说区域 start -->
    <div class="cartoon3">
        <div class="cartoon3_content wrapper">   
            <div class="cartoon3_title clearfix">
                <h2 class="f_left">冒险传说</h2>
                <button class="f_right">更多</button>
            </div>
            <ul class="clearfix">
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc25717">
                        <img src="./素材/冒险传说/1.jpg" alt="">
                        <p>鬼灭之刃</p>
                        <p>[完结] 共 208 话</p>
                    </a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc27491">
                        <img src="./素材/冒险传说/2.jpg" alt="">
                        <p>我的守护女友</p>
                        <p>更新至 274 话</p>
                    </a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc27649">
                        <img src="./素材/冒险传说/3.jpg" alt="">
                        <p>星掠者</p>
                        <p>更新至 77 话</p>
                    </a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc27755">
                        <img src="./素材/冒险传说/4.jpg" alt="">
                        <p>神武帝尊</p>
                        <p>更新至 110 话</p>
                    </a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc28615">
                        <img src="./素材/冒险传说/5.jpg" alt="">
                        <p>盾之勇者成名录</p>
                        <p>更新至 66 话</p>
                    </a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc26504">
                        <img src="./素材/冒险传说/6.jpg" alt="">
                        <p>九阳神王</p>
                        <p>更新至 240 话</p>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 冒险传说区域 end -->
    <!-- 恋爱物语区域 start -->
    <div class="cartoon3">
        <div class="cartoon3_content wrapper">   
            <div class="cartoon3_title clearfix">
                <h2 class="f_left">恋爱物语</h2>
                <button class="f_right">更多</button>
            </div>
            <ul class="clearfix">
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc27652">
                        <img src="./素材/恋爱物语/1.jpg" alt="">
                        <p>理科生坠入情网，故尝试证明。</p>
                        <p>更新至 番外篇</p>
                    </a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc26484">
                        <img src="./素材/恋爱物语/2.jpg" alt="">
                        <p>萌师在上</p>
                        <p>更新至 329 话</p>
                    </a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc27705">
                        <img src="./素材/恋爱物语/3.png" alt="">
                        <p>恰似寒光遇骄阳</p>
                        <p>更新至 233 话</p>
                    </a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc24839">
                        <img src="./素材/恋爱物语/4.jpg" alt="">
                        <p>香蜜沉沉</p>
                        <p>[完结] 共 104 话</p>
                    </a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc30471">
                        <img src="./素材/恋爱物语/5.jpg" alt="">
                        <p>妖精种植手册</p>
                        <p>更新至 518 话</p>
                    </a>
                </li>
                <li class="f_left">
                    <a href="https://manga.bilibili.com/detail/mc26981">
                        <img src="./素材/恋爱物语/6.jpg" alt="">
                        <p>Coffee & Vanilla 咖啡和香草</p>
                        <p>更新至 77 话</p>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 恋爱物语区域 end -->
    <!-- 漫画底部区域 start -->
    <div class="footer">
        <div class="footer_content wrapper">
            <div class="foot_up clearfix">
                <div class="left f_left clearfix">
                    <div class="left_logo f_left">
                        <img src="./素材/底部/logo.png" alt="">
                        <span>哔哩哔哩漫画</span>
                    </div>
                    <div class="left_text f_left">
                        <a href="https://www.bilibili.com/blackboard/aboutUs.html">关于我们</a>
                        <a href="https://www.bilibili.com/blackboard/contact.html">联系我们</a>
                        <a href="https://www.bilibili.com/blackboard/friends-links.html">友情链接</a>
                        <a href="https://www.bilibili.com/blackboard/join.html">加入我们</a>
                    </div>
                </div>
                <div class="right f_right">
                    <ul class="clearfix">
                        <li class="f_left">
                            <a href="https://space.bilibili.com/326499679">
                                <img src="./素材/底部/1.svg" alt="11">
                                <p>B站官方</p>
                            </a>
                        </li>
                        <li class="f_left">
                            <a href="https://weibo.com/bilibilicomic">
                                <img src="./素材/底部/2.png" alt="22">
                                <p>新浪微博</p>
                            </a>
                        </li>
                        <li class="f_left">
                            <a href="https://manga.bilibili.com/app-download">
                                <img src="./素材/底部/3.png" alt="33">
                                <p>下载 bilibili 漫画客户端</p>
                            </a>
                        </li>
                    </ul>  
                </div>
            </div>
            <div class="foot_down clearfix">
                <div class="down_left f_left">
                    <img src="./素材/底部/hezuo.png" alt="44">
                    <img src="./素材/底部/kankan.png" alt="55">
                </div>
                <div class="down_right f_left">
                    <p>互联网 ICP 备案：沪 ICP17039440 号 - 1 | 网络文化经营许可证：沪网文 [2020]5452-371 号</p>
                    <p>全国网安备案号：31011002003092 | 增值电信业务经营许可证 沪 B2-20190879</p>
                    <p>12318 全国文化市场举报网站|上海市互联网违法和不良信息举报中心</p>
                    <p>上海呵呵呵文化传播有限公司 | 地址：上海市杨浦区政立路485号 | 电话：021-25099888</p> 
                </div>
            </div>
        </div>
    </div>
    <!-- 漫画底部区域 end -->
</body>
</html>                       